<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>

<!-- MAIN 菜单管理 -->
<div class="main">
    <!-- MAIN CONTENT -->
    <div class="main-content">
        <div class="container-fluid">
            <div class="panel panel-menu">
                <div class="clearfix">
                    <!-- LEFT COLUMN -->
                    <div class="menu-left">
                        <!-- MENU HEADER -->
                        <div class="menu-header">
                            <h3 class="header-title">菜单管理</h3>
                            <p class="header-subtitle">上次修改时间：2017-12-12</p>
                            <div class="header-icon">
                                <a href="javascript:void(0)" onclick="addMenu()" title="添加菜单"><span class="lnr lnr-plus-circle"></span></a>
                            </div>
                        </div>
                        <!-- END MENU HEADER -->
                        <!-- MENU DETAIL -->
                        <div class="menu-detail">
                            <div class="mtree-panel">
                                <span class="small csl active"></span>
                                ${menusInPanel}
                            </div>
                        </div>
                        <!-- END MENU DETAIL -->
                    </div>
                    <!-- END LEFT COLUMN -->
                    <!-- RIGHT COLUMN -->
                    <div class="menu-right"></div>
                    <!-- END RIGHT COLUMN -->
                </div>
            </div>
        </div>
    </div>
    <!-- END MAIN CONTENT -->
</div>
<!-- END MAIN -->
<script src='${pageContext.request.contextPath}/assets/components/mtree/js/jquery.velocity.min.js'></script>
<script src="${pageContext.request.contextPath}/assets/components/mtree/js/mtree.js"></script>
<script>
    var menus = $('.mtree-panel');
    menus.find('li:first').addClass('active mtree-active');

    var menuid = menus.find('a:first').attr('id');
    $('.menu-right').load("${pageContext.request.contextPath}/menu/editMenu?menuid=" + menuid);

    // 编辑相应菜单页面
    function editMenu(menuid) {
        $('.menu-right').load("${pageContext.request.contextPath}/menu/editMenu?menuid=" + menuid);
    }

    // 添加菜单
    function addMenu() {
        layer.open({
            type: 2, // Page层类型
            area: ['60%', '70%'],
            title: '菜单管理 | 添加菜单',
            shade: 0.3, // 遮罩透明度
            anim: 0,
            content: ['${pageContext.request.contextPath}/menu/addMenu', 'no'],
            cancel: function(){
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }
</script>